<template>
  <div class="wrap">
      <header>
          <router-link to="/account" class="img">
          <img src="lt.jpg" alt="">
          </router-link>
          <span class="set">设置</span>
      </header>
      <section>
          <div class="head">
              <div class="headb">
              <img src="kk2.jpg" alt="">
              </div>
          </div>
          <div class="nam">
              <span class="num" v-if="bool==false">立即登录</span>
              <span class="num" v-else>慕课{{tousername()}}</span>
              
              <span class="gt">&gt;</span>

          </div>
      </section>
      <footer>
          <div class="mode">
              <div class="mode1">
                <span class="p1">推送设置</span>
                <span class="p2">&gt;</span>
              </div>
              <div class="mode2">
                  <span>清除缓存</span>
              </div>
              <div class="mode3">
                  <span class="wifi">允许非WiFi网络播放</span>
                  <span class="nowifi">请慎重选择开启 避免过度使用流量</span>
                  <van-switch v-model="checked" size="0.2rem" active-color="#e12e21" inactive-color="#c3c3c3" class="van"/>
              </div>
              <div class="mode4">
                    <span class="wifi">允许非WiFi网络下载</span>
                  <span class="nowifi">请慎重选择开启 避免过度使用流量</span>
                  <van-switch v-model="checked" size="0.2rem" active-color="#e12e21" inactive-color="#c3c3c3" class="van"/>
              </div>
              <div class="mode5">
                  <span class="vide">视频自动播放</span>
                  <van-switch v-model="checked" size="0.2rem" active-color="#e12e21" inactive-color="#c3c3c3" class="vas"/>

              </div>
              <div class="mode6">
                  <span class="wifi">深色模式</span>
                  <span class="nowifi">自动适应系统深浅外观</span>
                  <van-switch v-model="checked" size="0.2rem" active-color="#e12e21" inactive-color="#c3c3c3" class="col"/>
              </div>
          </div>
          <div class="score">
              <div class="mode7">
                  <span class="span">给我评分</span>
                  <span class="gta">&gt;</span>
              </div>
              <div class="mode8">
                  <span class="about">关于慕课网</span>
                  <span class="gtb">&gt;</span>
              </div>
          </div>
          <div class="logn">
              <button @click="Exit()">退出登录</button>
          </div>
      </footer>
  </div>
</template>

<script>
import { ref } from 'vue';
// import {getlink} from "@/api/getapi.js"
import{getdatalink} from "@/api/getdatalink.js"
export default {
    mounted(){
        let token = JSON.parse(localStorage.getItem("token"));
            if(token){
                this.bool = true
            }
            console.log(token)
    },
    data(){
      return{
        username:'',
        bool:false
      }  
    },
    setup() {
        const checked = ref(true);
        return { checked};
    },
    methods:{
        tousername(){
        let token = JSON.parse(localStorage.getItem("token"));
           if(token){
                this.bool = true
            }
            console.log(this.bool)
            this.username = token.data.username
            return  this.username
        },
        Exit(){
        let a = "/api/logout/"
        getdatalink(a).then((ok)=>{
            console.log(ok)
          if(ok.data.msg == "退出成功"){
              alert("退出成功")
              localStorage.removeItem("token");
              this.$router.push("/account");
          }
          else{
              alert("还没有登录哦")
          }
       }) 
        }
    },
}
</script>

<style scoped>
body,html{
    width: 100%;
    height: 100%;
}
    .wrap{
        width: 100%;
        height: 6.67rem;
        display: flex;
        flex-direction: column;
        background-color:#f3f4f6;
    }
    header{
        height: 0.43rem;
        line-height: 0.43rem;
        margin-bottom: 0.17rem;
        background-color: white;
        border-bottom: 1px solid #cccc;
    }
    .img{
        position: relative;
        left: 0.2rem;
    }
    .set{
        font-size: 0.18rem;
        margin-left: 1.5rem;
    }
    section{
        width: 100%;
        height: 0.6rem;
        background-color: white;
        display: flex;
        margin-bottom: 0.17rem;
    }
    .head{
        width: 0.8rem;
        height: 0.6rem;
    }
    .headb{
        width: 0.52rem;
        height: 0.52rem;
        border-radius: 50%;
        margin-left: 0.2rem;
        margin-top: 0.05rem;
    }
    .headb img{
        width: 100%;
        height: 100%;
    }
    .nam{
        flex: 1;
        font-size: 0.15rem;
        /* background-color: orange; */
    }
    .num{
        
        line-height: 0.6rem;
    }
    .gt{
        margin-left: 1.6rem;
        color: #9999;
    }
    footer{
        flex: 1;
    }
    .mode{
        width: 100%;
        height: 3rem;
        margin-bottom: 0.17rem;
        background-color: white;
    }
    .mode1{
        height: 0.5rem;
        font-size: 0.15rem;
        border: 1px solid #f2f3f5;
    }
    .p1{
        line-height: 0.5rem;
        margin: 0.17rem 0.2rem;
    }
    .p2{
        margin-left: 2.35rem;
        color: #9999;

    }
    .mode2{
        height: 0.5rem;
        font-size: 0.15rem;
        line-height: 0.5rem;
        border: 1px solid #f2f3f5;
    }
    .mode2>span{
        margin: 0.17rem 0.2rem;

    }
    .mode3{
        height: 0.5rem;
        border: 1px solid #f2f3f5;
    }
    .van{
       position: relative;
       left: 0.9rem;
       top: -0.05rem;
    }
    .wifi{
        display: flex;
        font-size: 0.16rem;
        margin: 0rem 0.2rem;
    }
    .nowifi{
        font-size: 0.01rem;
        color: #cdcdcd;
        margin: 0.04rem 0.2rem;

    }
    .mode4{
        height: 0.5rem;
        border: 1px solid #f2f3f5;
    }
    .mode5{
        height: 0.5rem;
        line-height: 0.5rem;
        border: 1px solid #f2f3f5;
    }
    .vide{
        margin: 0.17rem 0.2rem;
    }
    .vas{
        position: relative;
       left: 1.78rem;
       top: 0.05rem;
    }
    .mode6{
        height: 0.5rem;
        border: 1px solid #f2f3f5;
    }
    .col{
        position: relative;
       left: 1.55rem;
       top: -0.05rem;
    }
    .score{
        height: 1rem;
        margin-bottom: 0.25rem;
        background-color: white;
    }
    .mode7{
        height: 0.5rem;
        font-size: 0.15rem;
        border: 1px solid #f2f3f5;
    }
    .mode8{
        height: 0.5rem;
        font-size: 0.15rem;

        border: 1px solid #f2f3f5;
    }
    .span{
        line-height: 0.5rem;
        margin: 0.17rem 0.2rem;

    }
    .about{
        line-height: 0.5rem;
        margin: 0.17rem 0.2rem;

    }
    .gta{
        margin-left: 2.3rem;
        color: #9999;
    }
    .gtb{
        margin-left: 2.15rem;
        color: #9999;

    }
    .logn{
        height: 0.5rem;
    }
    .logn button{
        background-color: white;
        border-radius: 0.05rem;
        border: 1px solid #cccc;
        width: 3.45rem;
        height: 0.5rem;
        margin: 0 0.14rem;
        color: red;
    }

</style>